<template>
	<view>
		<!-- 自定义导航栏  组件 -->
		<view :class="getClass">
			<!-- 状态栏 -->
			<view class="" :style="'height:'+statusBarHeight+'px;'"></view>
			<!-- 导航栏 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view  style="flex: 3;">
					<!-- 返回按钮 -->
					<slot v-if="showBack" name="left"></slot>
				</view>	  
				<!-- 标题 -->
				<view class="font-md" style="flex: 8;text-align: center;">{{getTitle}}</view>
				<!-- 右边 -->
				<view  class="flex right_icon" style="flex: 3;justify-content:flex-end;">
					<slot name="right" v-if="rightShow">
						<view class="flex align-center justify-center" hover-class="bg-hover-light" style="height: 90rpx;width: 80rpx;">
							<text @click="search" class="iconfont icon-sousuo1" style="font-size: 35rpx;"></text>
						</view>
						<view class="flex align-center justify-center" hover-class="bg-hover-light" style="height: 90rpx;width: 80rpx;"> 
							<text @click="openExtend" class="iconfont icon-jiahao" style="font-size: 44rpx;"></text>
						</view>    
					</slot>
				</view> 
			</view>   
		</view>
		
		<!-- 占位 -->
		<!-- #ifdef APP-PLUS -->
			<view v-if="fixedStatus" style="height: 150rpx;"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
			<view v-if="fixedStatus" style="height: 84rpx;"></view>
		<!-- #endif -->
		
		<!-- 拓展菜单 -->
		<!-- 弹出层 -->
		<freePopup ref="extend" :bodyWidth="320" :bodyHeight="525" bgClass>
			<view class="flex flex-column shadow-lg" style="width: 320rpx;height: 525rpx;">
				<view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in entends" :key="index" @click="clickEvent(item.event)">
					<image class="pl-3 pr-2" style="width: 50rpx;height: 50rpx; " :src="item.src" ></image>
					<text class="font-md">{{item.name}}</text>
				</view>
			</view>
		</freePopup>
	</view>
</template>

<script>
	import freePopup from'@/components/free-ui/free-popup'
	export default {
		components:{
			freePopup
		},
		props:{
			title:{//页面标题
				type:String,
				default:''
			},
			msgNum:{//消息数量
				type:Number,
				default:0
			},
			fixedStatus:{//顶部导航是否固定
				type:Boolean,
				default:false
			},
			zwStatus:{//导航下方占位 默认不存在
				type:Boolean,
				default:false
			},
			bgColor:{//导航背景颜色 默认主题色
				type:String,
				default:'bg-light'
			},
			showBack:{//导航右边的返回按钮 默认不存在
				type:Boolean,
				default:false
			},
			rightShow:{//是否显示顶部导航栏的右侧图标  默认显示
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				statusBarHeight:0,
				navBarHeight:0,//占位的高度
				entends:[
					{
						src:'/static/images/index/ql.png',
						name:"发起群聊",
						event:"setTop",
					},
					{
						src:'/static/images/index/addf.png',
						name:"添加朋友",
						event:"delChat",
					},
					{
						src:'/static/images/index/sao.png',
						name:"扫一扫",
						event:"sys",
					},
					{
						src:'/static/images/index/pay.png',
						name:"收付款",
						event:"sfk",
					},
					{
						src:'/static/images/index/help.png',
						name:"帮助与反馈",
						event:"bzfk",
					},
				]
			}
		},
		mounted() {
			this.statusBarHeight = plus.navigator.getStatusbarHeight();//动态获取 状态栏 的高度
			console.log('this.statusBarHeight',this.statusBarHeight);
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90);//状态栏高度 + 自定义 导航 高度
			console.log('this.navBarHeight',this.navBarHeight);
		},
		computed:{ //动态计算占位的高度  注意符号的使用  ``
			fixedStyle(){
				return `height:${this.navBarHeight}px`
			},
			getTitle(){ //通过计算属性 将标题和后面的数据进行合并  处理
				let noreadnum = this.msgNum > 0?'('+this.msgNum+')':'';
				return this.title + noreadnum
			},
			getClass(){
				let fixed =  this.fixedStatus?'fixed-top':'';
				return `${fixed} ${this.bgColor}`
			}
		},
		methods: {
			// 加号点击拓展事件
			clickEvent(e){
				switch(e){
					case 'sys':
						// 允许从相机和相册扫码
						uni.scanCode({
						    success: function (res) {
						        console.log('条码类型：' + res.scanType);
						        console.log('条码内容：' + res.result);
						    }
						});
						this.$refs.extend.hiden()
						break;
					case 'sfk':
						console.log('sfk');
						break;
					case 'bzfk':
						console.log('bzfk');
						break;
						default:	
				}
				console.log('e',e);
			},
			openExtend(){
				this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150));
			},
			search(){
				uni.showToast({
					title:'搜索点击事件',
					icon:'none'
				})
			}
		}
	}
</script>

<style>
	@import '@/common/free.css';
	@import '@/common/common.css';
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
	::-webkit-scrollbar {
	  display: none;
	}
	.right_icon image{
		width:28px ;
	}
	.icon-like {
	    font-size: 20px;
	}
</style>
